<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DashBoard</title>
    <!--引入js-->
    <script src="/js/socket.io.js"></script>
    <script src="/js/jquery-3.1.1.min.js"></script>
    <script src="/js/highcharts.js"></script>
    <script src="/js/exporting.js"></script>
    <script type="text/javascript" charset="utf-8">
        // 连接
        var socket = io.connect('127.0.0.1:7777');
        // 接收后端发送来的学期人数统计数据
        socket.on('termDate', function (message) {
            console.log(message);
            var dataArray = message.split('\n').filter(line => line.trim()!== '');
            var currentTime = (new Date()).getTime();
            dataArray.forEach(line => {
                var parts = line.split('\t');
                if (parts.length >= 2) {
                    var semester = parts[0].trim();
                    var count = parseInt(parts[1].trim());
                    var semesterIndex = parseInt(semester) - 1; // 假设学期是从 1 开始编号
                    var series = Highcharts.charts[0].series[semesterIndex];
                    if (series) {
                        // 更新现有数据
                        series.addPoint([currentTime, count], false, false);
                    }
                }
            });
            Highcharts.charts[0].redraw(); // 重新绘制图表
        });
    </script>
</head>
<body>
<div id="container" style="width: 100%;height: 100vh;margin: 0 auto"></div>

<script type="text/javascript">
    /*Highcharts设置*/
    $(document).ready(function () {
        Highcharts.setOptions({
            global: {
                //设置时间，使用本地时间
                useUTC: false
            }
        });
        // 设置Highcharts图表在#container中显示
        var chart = Highcharts.chart('container', {
            chart: {
                // 折线图类型
                type: 'spline',
                animation: Highcharts.svg,
                marginRight: 10,
                events: {
                    // 加载事件
                    load: function () {
                        // 定时器，每一秒执行一次，触发向后端请求数据（这里只是示意，需和后端配合实现具体请求逻辑）
                        setInterval(function () {
                            socket.emit('requestData');
                        }, 1000); // 从 2000 毫秒改为 1000 毫秒
                    }
                }
            },
            title: {
                text: '各学期学生人数实时分析'
            },
            xAxis: {
                type: 'datetime',
                title: {
                    text: '发送时间'
                },
                // 初始最小时间为当前时间减去 20 秒
                min: (new Date()).getTime() - (20 * 1000)
            },
            yAxis: {
                title: {
                    text: '数量'
                },
                plotLines: [{
                    value: 0,
                    width: 1,
                    color: '#808080'
                }]
            },
            tooltip: {
                formatter: function () {
                    return '<b>' + this.series.name + '</b><br/>' +
                        Highcharts.dateFormat('%Y-%m-%d %H:%M:%S', this.x) + '<br/>' +
                        Highcharts.numberFormat(this.y, 0);
                }
            },
            legend: {
                enabled: true
            },
            exporting: {
                enabled: true
            },
            series: [
                { name: '学期1', data: (function () {
                        // 生成一个长度为20，值为 0 的数组，作为初始数据显示
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0 // 初始值设为 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期2', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期3', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期4', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期5', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期6', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期7', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                },
                { name: '学期8', data: (function () {
                        var data = [],
                            time = (new Date()).getTime(),
                            i;
                        for (i = -19; i <= 0; i += 1) {
                            data.push({
                                x: time + i * 1000,
                                y: 0
                            });
                        }
                        return data;
                    }())
                }
            ]
        });
    });
</script>
</body>
</html>